/*
 * @Author: liszter <liszter@qq.com>
 * @Date: 2024-02-19 16:18:32
 * @LastEditTime: 2024-02-22 13:47:13
 * @LastEditors: lishutao
 * @Description: 点材质， points 使用
 * @FilePath: \three学习代码\demo-08\src\main\main.js
 */
import * as THREE from "three";


// 创建场景
const scene = new THREE.Scene();

// 创建相机 
// 2、创建相机
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  300
);
camera.position.set(0, 0, 28);
scene.add(camera);



// 创建一个球形物体
const sphereGeometry = new THREE.SphereGeometry(15, 32, 32);
// 设置点材质
const pointsMaterial = new THREE.PointsMaterial();
pointsMaterial.size = 0.01;
pointsMaterial.color.set(0xfff000);
// 相机深度而衰减
pointsMaterial.sizeAttenuation = true;




const points = new THREE.Points(sphereGeometry, pointsMaterial);

scene.add(points);

// 创建渲染器
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);

document.body.appendChild(renderer.domElement);
// 设置初始角度
let angle = 0;
// 设置时钟
const clock = new THREE.Clock();
// 渲染循环
function animate() {
  requestAnimationFrame(animate);

  let time = clock.getElapsedTime();
  // points.position.x = Math.sin(time) * 3;
  // points.position.z = Math.cos(time) * 3;
  // points.position.y = 2 + Math.sin(time * 10) / 2;

 // 旋转物体
 points.rotation.y = angle * Math.PI / 180;
 points.rotation.x = angle * Math.PI / 180;

 // 渲染场景
 renderer.render(scene, camera);

 // 增加角度
 angle += 1;
 if (angle >= 360) {
     angle = 0;
 }

   //   根据当前滚动的scrolly，去设置相机移动的位置
   renderer.render(scene, camera);

}
animate();


// gsap.to(points.position, {
//   y: 1,
//   duration: 0.5,
//   ease: "power2.inOut",
//   repeat: -1,
//   yoyo: true,
// })


